<template>
  <div class="cart-page">
    <div class="cart-header">
      <svg class="back-arrow" viewBox="0 0 24 43" @click="$router.back()">
        <path d="M20 2 L4 21.5 L20 41" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>
      </svg>
      <span class="cart-tab active">购物车</span>
      <span class="cart-tab">心愿单</span>
      <span class="cart-manage" @click="goSetting">管理</span>
    </div>
    <div v-if="cartList.length === 0" class="cart-empty cart-list-area">
      <svg class="cart-empty-icon" viewBox="0 0 120 80">
        <rect x="20" y="40" width="80" height="30" rx="10" fill="#f5f5f5"/>
        <circle cx="40" cy="70" r="6" fill="#eee"/>
        <circle cx="80" cy="70" r="6" fill="#eee"/>
        <rect x="40" y="30" width="40" height="20" rx="6" fill="#fafafa"/>
      </svg>
      <div class="cart-empty-text">购物车是空的哦，快去加购心仪商品吧</div>
    </div>
    <div v-else class="cart-list-area">
      <div class="cart-list">
        <div class="cart-item" v-for="item in cartList" :key="item.id">
          <img class="cart-item-img" :src="item.imgs ? item.imgs[0] : item.img" />
          <div class="cart-item-info">
            <div class="cart-item-title">{{ item.title }}</div>
            <div class="cart-item-subtitle">{{ item.subtitle }}</div>
            <div class="cart-item-bottom">
              <span class="cart-item-price">￥{{ item.price }}</span>
              <span class="cart-item-count">x{{ item.count }}</span>
              <button class="cart-btn cart-btn-op" @click="addCount(item)">+</button>
              <button class="cart-btn cart-btn-op" @click="removeCount(item)">-</button>
              <button class="cart-btn cart-btn-del" @click="deleteItem(item)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-guess">
      <div class="guess-title">猜你喜欢</div>
      <div class="guess-goods-list">
        <div class="goods-card" v-for="g in guessList" :key="g.id">
          <div class="goods-img-wrap">
            <img :src="g.img" class="goods-img" />
          </div>
          <div class="goods-info">
            <div class="goods-title">{{ g.title }}</div>
            <div class="goods-desc">{{ g.desc }}</div>
            <div class="goods-price-row">
              <span class="goods-price">￥{{ g.price }}</span>
              <span class="goods-old-price" v-if="g.oldPrice">￥{{ g.oldPrice }}</span>
              <span class="goods-sold" v-if="g.sold">已售{{ g.sold }}</span>
            </div>
            <div class="goods-tags" v-if="g.tags && g.tags.length">
              <span class="goods-tag" v-for="tag in g.tags" :key="tag">{{ tag }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-bottom-bar">
      <div class="cart-check-all">
        <span class="cart-check-circle"></span>
        <span class="cart-check-text">全选</span>
      </div>
      <div class="cart-total">总计 <span class="cart-total-price">￥{{ totalPrice }}</span></div>
      <button class="checkout-btn" @click="handleCheckout">结算</button>
    </div>
    <transition name="fade">
      <div v-if="isLoading" class="checkout-loading">
        <div class="loader"></div>
        <div class="loading-text">正在结算...</div>
      </div>
    </transition>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'MarketCart',
  computed: {
    ...mapState('cart', ['cartList']),
    totalPrice() {
      return this.cartList.reduce((sum, item) => sum + Number(item.price) * item.count, 0).toFixed(2);
    }
  },
  data() {
    return {
      guessList: [
        { id: 101, img: require('/public/img/cart/carshop1.png'), tag: '180天最低价', title: '友妤市集XYNG·绿檀木佛珠手串女森系学生檀香', subtitle: '', desc: '潮流百搭', price: 49.9, oldPrice: 69.9, sold: 120, tags: ['新品', '包邮'] },
        { id: 102, img: require('/public/img/cart/carshop2.png'), tag: '友好市集', title: '友好市集大容量中性风防水离家出走双肩包包多', subtitle: '冰丝材质，清凉舒适', desc: '易清洗不易变形。', price: 59, oldPrice: 109, sold: 94, tags: ['热卖', '限时特价'] }
      ],
      isLoading: false
    }
  },
  methods: {
    ...mapMutations('cart', ['clearCart']),
    ...mapMutations('order', ['addOrder']),
    addCount(item) {
      item.count++;
    },
    removeCount(item) {
      if (item.count > 1) item.count--;
    },
    deleteItem(item) {
      this.$store.state.cart.cartList = this.$store.state.cart.cartList.filter(i => i.id !== item.id);
    },
    goSetting() {
      this.$router.push('/market/cart/setting');
    },
    handleCheckout() {
      if (!this.cartList.length) return;
      this.isLoading = true;
      setTimeout(() => {
        // 构造订单对象
        const order = {
          id: Date.now(),
          products: JSON.parse(JSON.stringify(this.cartList)),
          time: new Date().toLocaleString(),
          status: '待发货'
        };
        this.addOrder(order);
        this.clearCart();
        this.isLoading = false;
        this.$router.push('/order');
      }, 1500);
    }
  }
}
</script>

<style scoped>
.cart-page {
  background: #fff;
  min-height: 100vh;
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.cart-header {
  display: flex;
  align-items: center;
  height: 82px;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 38px 0 38px;
  font-size: 0;
  position: relative;
}
.back-arrow {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  cursor: pointer;
}
.cart-title {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  margin-right: 18px;
}
.cart-tab {
  font-size: 30px;
  color: #222;
  margin-right: 38px;
  padding-bottom: 8px;
  cursor: pointer;
  position: relative;
}
.cart-tab.active {
  color: #222;
  font-weight: bold;
}
.cart-tab.active::after {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: #fe2c55;
  border-radius: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.cart-manage {
  font-size: 30px;
  color: #222;
  position: absolute;
  right: 38px;
  top: 26px;
}
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60px 0 0 0;
  min-height: 478px;
  justify-content: center;
}
.cart-empty-icon {
  width: 120px;
  height: 80px;
  margin-bottom: 18px;
}
.cart-empty-text {
  color: #888;
  font-size: 22px;
}
.cart-list-area {
  padding: 0 0 0 0;
  min-height: 478px;
}
.cart-list {
  padding: 18px 18px 0 18px;
}
.cart-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 28px;
  background: #fafafa;
  border-radius: 18px;
  padding: 24px 22px;
  min-height: 140px;
  font-size: 0;
}
.cart-item-img {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  object-fit: cover;
  margin-right: 24px;
}
.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cart-item-title {
  font-size: 28px;
  color: #222;
  font-weight: bold;
  margin-bottom: 10px;
}
.cart-item-subtitle {
  font-size: 22px;
  color: #888;
  margin-bottom: 12px;
}
.cart-item-bottom {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 18px;
}
.cart-item-price {
  color: #fe2c55;
  font-size: 26px;
  font-weight: bold;
}
.cart-item-count {
  color: #888;
  font-size: 22px;
}
.cart-btn {
  background: #fff0f0;
  color: #fe2c55;
  border: none;
  border-radius: 8px;
  font-size: 30px;
  padding: 8px 28px;
  margin-left: 12px;
  cursor: pointer;
  min-width: 60px;
  min-height: 60px;
}
.cart-btn-op {
  font-size: 36px;
  padding: 8px 24px;
  min-width: 60px;
  min-height: 60px;
}
.cart-btn-del {
  background: #fe2c55;
  color: #fff;
  font-size: 30px;
  min-width: 90px;
  min-height: 60px;
}
.goods-desc {
  font-size: 20px;
  color: #888;
  margin-bottom: 8px;
  line-height: 1.4;
  min-height: 48px;
}
.cart-guess {
  margin: 18px 0 0 0;
  padding: 0 18px;
}
.guess-title {
  font-size: 32px;
  color: #222;
  font-weight: bold;
  margin-bottom: 10px;
}
.guess-goods-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 2px;
  box-sizing: border-box;
  max-width: 750px;
  margin: 0 auto;
}
.goods-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  width: 350px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 710px;
}
.goods-img-wrap {
  width: 362px;
  height: 482px;
  overflow: hidden;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.goods-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.goods-info {
  padding: 18px 18px 0 18px;
  height: 228px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.goods-title {
  font-size: 27px;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.6em;
}
.goods-subtitle {
  font-size: 20px;
  color: #888;
  margin-bottom: 8px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.4em;
}
.goods-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.goods-price {
  color: #fe2c55;
  font-size: 28px;
  font-weight: bold;
}
.goods-old-price {
  color: #bbb;
  font-size: 20px;
  text-decoration: line-through;
}
.goods-sold {
  color: #bbb;
  font-size: 18px;
}
.goods-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.goods-tag {
  background: #f5f5f5;
  color: #fe2c55;
  font-size: 18px;
  border-radius: 8px;
  padding: 2px 10px;
}
.cart-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 0 18px 0 18px;
  height: 110px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 10;
}
.cart-check-all {
  display: flex;
  align-items: center;
  margin-right: auto;
  gap: 16px;
}
.cart-check-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #bbb;
  display: inline-block;
  margin-right: 8px;
}
.cart-check-text {
  font-size: 30px;
  color: #222;
}
.cart-total {
  font-size: 28px;
  color: #222;
}
.cart-total-price {
  color: #fe2c55;
  font-size: 28px;
  font-weight: bold;
  margin-left: 2px;
}
.checkout-btn {
  background: #fe2c55;
  color: #fff;
  font-size: 30px;
  border: none;
  border-radius: 42px;
  width: 255px;
  height: 85px;
  font-weight: bold;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-loading {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.85);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #fe2c55;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  animation: spin 1s linear infinite;
  margin-bottom: 24px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-text {
  font-size: 26px;
  color: #fe2c55;
  font-weight: bold;
  letter-spacing: 2px;
}
</style> 